<template>
  <div class="box">
    <header class="header">
      <van-nav-bar style="width: 100%;">
        <div slot="left">
          <span class="iconfont icon-fenleisousuo"></span>
        </div>
        <img src="https://m.hua.com/content/vue/login/static/img/m_hualogo.png" slot="title">
        <div slot="right">
          <span class="iconfont icon-kefu"></span>
        </div>
      </van-nav-bar>
    </header>
    <div class="content" id="content">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item of bannerlist"
        :key="item.bannerid">
          <van-image
              lazy-load
              :src="item.img"
            />
        </van-swipe-item>
      </van-swipe>
      <div class="main-min">
        <div class="iconfont icon-zhengque">认证龙头企业</div>
        <div class="iconfont icon-zhengque">15年品牌</div>
        <div class="iconfont icon-zhengque">3小时送花</div>
        <div class="iconfont icon-zhengque">最近358420条好评</div>
      </div>
      <nav class="procate">
            <div class="procate-item">
                <a href="/flower/" class="navigation">
                    <img src="https://img02.hua.com/m/home/img/m_home_category_flower.png" alt="鲜花">
                    <p>鲜花</p>
                </a>
            </div>
            <div class="procate-item">
                <a href="/yongshenghua/" class="navigation">
                    <img src="https://img02.hua.com/m/home/img/m_home_category_ppf.png" alt="永生花">
                    <p>永生花</p>
                </a>
            </div>
            <div class="procate-item">
                <a href="/cake/" class="navigation">
                    <img src="https://img02.hua.com/m/home/img/m_home_category_cake.png" alt="蛋糕">
                    <p>蛋糕</p>
                </a>
            </div>
            <div class="procate-item">
                <a href="/gifts/" class="navigation">
                    <img src="https://img02.hua.com/m/home/img/m_home_category_gift.png" alt="礼品">
                    <p>礼品</p>
                </a>
            </div>
            <div class="procate-item">
                <a href="/gifts/chocolates/" class="navigation">
                    <img src="https://img02.hua.com/m/home/img/m_home_category_chocolate.png" alt="巧克力">
                    <p>巧克力</p>
                </a>
            </div>
      </nav>
      <div class="scene">
        <div class="modetitle">一秒选花</div>
        <div class="scene-list">
          <div class="scene-item scene-item-radius">
              <a href="/aiqingxianhua/" class="navigation">
                  <img src="https://img02.hua.com/m/home/img/m_home_use_lover.png" alt="送恋人">
                  <span class="scene-item-use-title">送恋人</span>
              </a>
          </div>
          <div class="scene-item scene-item-radius">
              <a href="/songzhangbeixianhua/" class="navigation">
                  <img src="https://img02.hua.com/m/home/img/m_home_use_elder.png" alt="送长辈">
                  <span class="scene-item-use-title">送长辈</span>
              </a>
          </div>
          <div class="scene-item scene-item-radius">
              <a href="/youqingxianhua/" class="navigation">
                  <img src="https://img02.hua.com/m/home/img/m_home_use_friends.png" alt="送朋友">
                  <span class="scene-item-use-title">送朋友</span>
              </a>
          </div>
        </div>
        <div class="scene-list">
          <div class="scene-item scene-item-radius">
              <a href="/shengrixianhua/" class="navigation">
                  <img src="https://img02.hua.com/m/home/img/m_home_use_birthday2.png" alt="生日祝福">
                  <span class="scene-item-title">生日祝福</span>
              </a>
          </div>
          <div class="scene-item scene-item-radius">
              <a href="/biaobaiqiuhunxianhua/" class="navigation">
                  <img src="https://img02.hua.com/m/home/img/m_home_use_profess2.png" alt="表白求婚">
                  <span class="scene-item-title">表白求婚</span>
              </a>
          </div>
          <div class="scene-item scene-item-radius">
              <a href="/businessFlower/" class="navigation">
                  <img src="https://img02.hua.com/m/home/img/m_home_use_business2.png" alt="开业商务">
                  <span class="scene-item-title">开业商务</span>
              </a>
          </div>
          <div class="scene-item scene-item-radius">
              <a href="zhounianjinianxianhua" class="navigation">
                  <img src="https://img02.hua.com/m/home/img/m_home_use_anniversary2.png" alt="周年纪念">
                  <span class="scene-item-title">周年纪念</span>
              </a>
          </div>
        </div>
        <div class="scene-list">
          <a href="/ranking/" class="scene-item scene-item-bg" style="background-image: url(https://img02.hua.com/m/home/img/m_home_ranklist2.png);">
            <p class="scene-item-name">热销榜</p>
            <p class="scene-item-desc">集万千宠爱</p>
            <div class="scene-item-bottom">
              <span class="scene-item-bottom-label">大家都在买</span>
              <span class="scene-item-bottom-text">热销11.6万束</span>
            </div>
          </a>
          <a href="/theme/tejiazhuanqu/" class="scene-item scene-item-bg" style="background-image: url(https://img02.hua.com/m/home/img/m_home_special2.png);">
            <p class="scene-item-name">特价专区</p>
            <p class="scene-item-desc">超值好货</p>
            <div class="scene-item-bottom">
              <span class="scene-item-bottom-label">限时直降</span>
              <span class="scene-item-bottom-text" data-id="9012038" style="opacity: 1;">¥158<s>¥186</s></span>
            </div>
          </a>
        </div>
        <div class="scene-list">
          <div class="scene-item">
            <a href="https://m.hua.com/theme/xinpinlaixi/" class="navigation">
              <img src="https://img02.hua.com/m/home/img/m_home_category_new2.png" alt="新品来袭">
              <span class="scene-item-pange">新品来袭</span>
            </a>
          </div>
          <div class="scene-item">
            <a href="https://m.hua.com/theme/pinweizhixuan/" class="navigation">
              <img src="https://img02.hua.com/m/home/img/m_home_category_quality2.png" alt="品味之选">
              <span class="scene-item-pange">品味之选</span>
            </a>
          </div>
          <div class="scene-item">
            <a href="https://m.hua.com/you/" class="navigation">
              <img src="https://img02.hua.com/m/home/img/m_home_category_you2.png" alt="设计师臻选">
              <span class="scene-item-pange">设计师臻选</span>
            </a>
          </div>
        </div>
      </div>
      <div class="product">
        <h3 class="product-title">送恋人/爱情鲜花</h3>
        <div class="product-list">
          <!-- 用分类渲染 -->
          <div class="product-item product-item-horizontal"
            v-for="item of girllist"
            :key="item.productid"
            @click="toDetail(item.productid)">
            <a class="navigation">
              <div class="product-item-pic">
                  <img :src="item.imgurl[0]" :alt="item.product_info">
              </div>
              <div class="product-item-info">
                <p class="product-item-info-name text-overflow">{{ item.product_info }}</p>
                <p class="product-item-info-desc text-overflow-line2 ">{{ item.product_dsc }}</p>
                <div class="product-item-info-tags">
                  <span class="tag-promo">畅销爆款</span>
                </div>
                <div class="product-item-info-promo">{{ item.tag }}</div>
                <div class="product-item-info-bottom">
                  <div class="product-item-info-bottom-left">
                    <p class="product-item-info-prices" :data-id="item.productid" style="opacity: 1;"><strong>¥{{ item.now_price }}</strong><s>¥{{ item.old_price }}</s></p>
                    <p class="product-item-info-sales">已销售{{ item.sells }}件</p>
                  </div>
                  <div class="product-item-info-bottom-right" :data-id="item.productid">
                    <i class="iconfont icon-gouwuche1"></i>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
        <div class="product-more">
          <a href="" class="product-more-btn">查看更多</a>
        </div>
      </div>
      <div class="product">
        <h3 class="product-title">送长辈鲜花</h3>
        <div class="product-list">
          <!-- 用分类渲染 -->
          <div class="product-item product-item-horizontal"
            v-for="item of elderlist"
            :key="item.productid"
            @click="toDetail(item.productid)">
            <a class="navigation">
              <div class="product-item-pic">
                  <img :src="item.imgurl[0]" :alt="item.product_info">
              </div>
              <div class="product-item-info">
                <p class="product-item-info-name text-overflow">{{ item.product_info }}</p>
                <p class="product-item-info-desc text-overflow-line2 ">{{ item.product_dsc }}</p>
                <div class="product-item-info-tags">
                  <span class="tag-promo">热卖推荐</span>
                </div>
                <div class="product-item-info-promo">{{ item.tag }}</div>
                <div class="product-item-info-bottom">
                  <div class="product-item-info-bottom-left">
                    <p class="product-item-info-prices" :data-id="item.productid" style="opacity: 1;"><strong>¥{{ item.now_price }}</strong><s>¥{{ item.old_price }}</s></p>
                    <p class="product-item-info-sales">已销售{{ item.sells }}件</p>
                  </div>
                  <div class="product-item-info-bottom-right" :data-id="item.productid">
                    <i class="iconfont icon-gouwuche1"></i>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
        <div class="product-more">
          <a href="" class="product-more-btn">查看更多</a>
        </div>
      </div>
      <div class="product">
        <h3 class="product-title">永生花推荐</h3>
        <div class="product-list product-list-vertical">
          <!-- 用分类渲染 -->
          <div class="product-item product-item-vertical"
            v-for="item of foreverlist"
            :key="item.productid"
            @click="toDetail(item.productid)">
            <a class="navigation">
              <div class="product-item-pic">
                  <img :src="item.imgurl[0]" :alt="item.product_info">
              </div>
              <div class="product-item-info-yongsheng">
                <p class="product-item-info-desc text-overflow-line2 ">{{ item.product_dsc }}</p>
                <div class="product-item-info-tags">
                  <span class="tag-promo">热卖推荐</span>
                </div>
                <div class="product-item-info-bottom">
                  <div class="product-item-info-bottom-left">
                    <p class="product-item-info-prices" :data-id="item.productid" style="opacity: 1;"><strong>¥{{ item.now_price }}</strong><s>¥{{ item.old_price }}</s></p>
                    <p class="product-item-info-sales">已销售{{ item.sells }}件</p>
                  </div>
                  <div class="product-item-info-bottom-right" :data-id="item.productid">
                    <i class="iconfont icon-gouwuche1"></i>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
        <div class="product-more">
          <a href="" class="product-more-btn">查看更多</a>
        </div>
      </div>
      <div class="product">
        <h3 class="product-title">蛋糕推荐</h3>
        <div class="product-list product-list-vertical">
          <!-- 用分类渲染 -->
          <div class="product-item product-item-vertical"
            v-for="item of cakelist"
            :key="item.productid"
            @click="toDetail(item.productid)">
            <a class="navigation">
              <div class="product-item-pic">
                  <img :src="item.imgurl[0]" :alt="item.product_info">
              </div>
              <div class="product-item-info-yongsheng">
                <p class="product-item-info-desc text-overflow-line2 ">{{ item.product_dsc }}</p>
                <div class="product-item-info-tags">
                  <span class="tag-promo">热卖推荐</span>
                </div>
                <div class="product-item-info-bottom">
                  <div class="product-item-info-bottom-left">
                    <p class="product-item-info-prices" :data-id="item.productid" style="opacity: 1;"><strong>¥{{ item.now_price }}</strong><s>¥{{ item.old_price }}</s></p>
                    <p class="product-item-info-sales">已销售{{ item.sells }}件</p>
                  </div>
                  <div class="product-item-info-bottom-right" :data-id="item.productid">
                    <i class="iconfont icon-gouwuche1"></i>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
        <div class="product-more">
          <a href="" class="product-more-btn">查看更多</a>
        </div>
      </div>
      <div class="product">
        <h3 class="product-title">礼物推荐</h3>
        <div class="product-list product-list-vertical">
          <!-- 用分类渲染 -->
          <div class="product-item product-item-vertical"
            v-for="item of giftslist"
            :key="item.productid"
            @click="toDetail(item.productid)">
            <a class="navigation">
              <div class="product-item-pic">
                  <img :src="item.imgurl[0]" :alt="item.product_info">
              </div>
              <div class="product-item-info-yongsheng">
                <p class="product-item-info-desc text-overflow-line2 ">{{ item.product_dsc }}</p>
                <div class="product-item-info-tags">
                  <span class="tag-promo">热卖推荐</span>
                </div>
                <div class="product-item-info-bottom">
                  <div class="product-item-info-bottom-left">
                    <p class="product-item-info-prices" :data-id="item.productid" style="opacity: 1;"><strong>¥{{ item.now_price }}</strong><s>¥{{ item.old_price }}</s></p>
                    <p class="product-item-info-sales">已销售{{ item.sells }}件</p>
                  </div>
                  <div class="product-item-info-bottom-right" :data-id="item.productid">
                    <i class="iconfont icon-gouwuche1"></i>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
        <div class="product-more">
          <a href="" class="product-more-btn">查看更多</a>
        </div>
      </div>
      <div class="product">
        <h3 class="product-title">巧克力推荐</h3>
        <div class="product-list product-list-vertical">
          <!-- 用分类渲染 -->
          <div class="product-item product-item-vertical"
            v-for="item of chocolateslist"
            :key="item.productid"
            @click="toDetail(item.productid)">
            <a class="navigation">
              <div class="product-item-pic">
                  <img :src="item.imgurl[0]" :alt="item.product_info">
              </div>
              <div class="product-item-info-yongsheng">
                <p class="product-item-info-desc text-overflow-line2 ">{{ item.product_dsc }}</p>
                <div class="product-item-info-tags">
                  <span class="tag-promo">热卖推荐</span>
                </div>
                <div class="product-item-info-bottom">
                  <div class="product-item-info-bottom-left">
                    <p class="product-item-info-prices" :data-id="item.productid" style="opacity: 1;"><strong>¥{{ item.now_price }}</strong><s>¥{{ item.old_price }}</s></p>
                    <p class="product-item-info-sales">已销售{{ item.sells }}件</p>
                  </div>
                  <div class="product-item-info-bottom-right" :data-id="item.productid">
                    <i class="iconfont icon-gouwuche1"></i>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
        <div class="product-more">
          <a href="" class="product-more-btn">查看更多</a>
        </div>
      </div>
      <div class="qiyetuangou">
        <a class="navigation"><img src="https://img02.hua.com/m/home/img/m_home_qiyetuangou.png"></a>
      </div>
      <div class="brand">
        <h3 class="brand-title">为什么选择我们</h3>
        <div class="brand-list">
          <div class="brand-item">
            <img src="https://img02.hua.com/m/pro_detail/m_details_brand_01.png" alt="获评鲜花龙头企业">
            <p>获评鲜花龙头企业</p>
          </div>
          <div class="brand-item">
            <img src="https://img02.hua.com/m/pro_detail/m_details_brand_02.png" alt="1~3小时送花上门">
            <p>1~3小时送花上门</p>
          </div>
          <div class="brand-item">
            <img src="https://img02.hua.com/m/pro_detail/m_details_brand_03.png" alt="赛事冠军花艺师团队">
            <p>赛事冠军花艺师团队</p>
          </div>
          <div class="brand-item">
            <img src="https://img02.hua.com/m/pro_detail/m_details_brand_04.png" alt="严选花材">
            <p>严选花材</p>
          </div>
          <div class="brand-item">
            <img src="https://img02.hua.com/m/pro_detail/m_details_brand_05.png" alt="12道严苛品控标准">
            <p>12道严苛品控标准</p>
          </div>
          <div class="brand-item">
            <img src="https://img02.hua.com/m/pro_detail/m_details_brand_06.png" alt="500万用户信赖好评">
            <p>500万用户信赖好评</p>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="footer-links">
            <a class="footer-links-item" title="企业团购">企业团购</a>
            <a class="footer-links-item" title="设计师款">设计师款</a>
            <a class="footer-links-item" title="同城鲜花">同城鲜花</a>
            <a class="footer-links-item" title="花语大全">花语大全</a>
        </div>
        <div class="footer-links" style="padding-top:0;">
            <a class="footer-links-item" title="花礼优势">花礼优势</a>
            <a class="footer-links-item" title="勇敢爱">勇敢爱</a>
            <a class="footer-links-item" title="常见问题">常见问题</a>
            <a class="footer-links-item" title="关于我们">关于我们</a>
        </div>
        <div class="footer-entry">
            <div class="footer-entry-item footer-entry-item-appdl">
                <a class="navigation">
                    <i class="iconfont icon-shouji"></i>
                    <p>客户端</p>
                </a>
            </div>
            <div class="footer-entry-item">
                <a class="navigation">
                    <i class="iconfont icon-kefu"></i>
                    <p>客服</p>
                </a>
            </div>
        </div>
        <p class="footer-copyright">Copyright © 2005~2020 花礼网（中国鲜花礼品网）版权所有<br>中国鲜花网领先品牌，鲜花速递专家！<br>深圳市百易信息技术有限公司  粤ICP备09171662号</p>
      </div>
      <div class="scrollbox" id="scrollbox" style="display: block;" v-if="flag" @click="backtop">
        <div class="scrollbox-item" id="scrollbox-goTop">
          <i class="iconfont icon-xiangshang"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload, Image, NavBar } from 'vant'
import { getBannerlist, getCategoryGirlfriend, getCategoryElders, getProlist } from '@/api'
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)
Vue.use(Image)
Vue.use(NavBar)
export default {
  data () {
    return {
      bannerlist: [],
      girllist: [],
      elderlist: [],
      foreverlist: [],
      cakelist: [],
      giftslist: [],
      chocolateslist: [],
      flag: false // 返回顶部是否出现
    }
  },
  mounted () {
    getBannerlist().then(res => {
      this.bannerlist = res.data.data
    })
    getCategoryGirlfriend().then(res => {
      this.girllist = res.data.data.slice(0, 8)
    })
    getCategoryElders().then(res => {
      this.elderlist = res.data.data.slice(1, 6)
    })
    getProlist({ type: 'yongshenghua', limit: 4, count: 0 }).then(res => {
      this.foreverlist = res.data.data
    })
    getProlist({ type: 'cake', limit: 4, count: 3 }).then(res => {
      this.cakelist = res.data.data
    })
    getProlist({ type: 'gifts', limit: 4, count: 0 }).then(res => {
      this.giftslist = res.data.data
    })
    getProlist({ type: 'chocolates', limit: 4, count: 0 }).then(res => {
      this.chocolateslist = res.data.data
      document.getElementById('content').addEventListener('scroll', this.handleScroll, false)
    })
  },
  methods: {
    toDetail (productid) {
      console.log(productid)
      this.$router.push({ path: '/detail/' + productid })
    },
    backtop () {
      document.getElementById('content').scrollTop = 0
    },
    handleScroll () {
      console.log('滚动')
      // 获取滚动条滚动的距离
      const scrollTop = document.getElementById('content').scrollTop
      // 判定返回顶部是不是要出现
      if (scrollTop > 500) {
        this.flag = true
      } else {
        this.flag = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
@import './index.scss';
</style>
